'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    TextInput,
    Platform,
    TouchableWithoutFeedback,
    ActivityIndicator,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import ImagePicker from 'react-native-image-picker';
import Main from '../Containers/Main';
import {RegisterAction} from '../Action/UserAction';
import UserAPIService from '../Commom/UserAPIService';
import * as types from '../Commom/ActionConst';
import {userInfo} from '../Action/UserAction';
export default class PerfectInformationPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            avatarSource: require('../../Image/input_headImage.png'),
            avatarUrl: '../../Image/icon_not_logged.png',
            inputUserName: '',
            imagePath: '',
            token:'',
            submitting: false,
        }
        this.closeKeybord = this.closeKeybord.bind(this);
        this.showText = this.showText.bind(this);
    }

    closeKeybord() {
        TextInput.State.blurTextInput(TextInput.State.currentlyFocusedField());
    }
    componentDidMount() {
        const {dispatch} = this.props;
        var token = this.props.token;
        if (token != null) {
            this.setState({
                token: token,
            })
        }
    }
    ClickAction(number) {
        const {dispatch} = this.props;
        const {UserReducer}=this.props;
        switch (number) {
            case 0:
                var options = {
                    title: '头像编辑',
                    cancelButtonTitle: '取消',
                    takePhotoButtonTitle: '从相机拍照获取',
                    chooseFromLibraryButtonTitle: '从手机相册选择',
                    allowsEditing: true, // 当用户选择过照片之后是否允许再次编辑图片
                    maxWidth: 750,
                    maxHeight: 1280,
                    quality:0.75,
                };
                ImagePicker.showImagePicker(options, (response) => {
                    if (response.didCancel) {
                    }
                    else if (response.error) {
                    }
                    else if (response.customButton) {
                    }
                    else {
                        let source;
                        let url;
                        let path;
                        if (Platform.OS === 'android') {
                            url = response.uri;
                            source = {uri: url};
                            path=response.path;
                        } else {
                            url = response.uri.replace('file://', '');
                            source = {uri: url};
                            path=response.uri.replace('file://', '');
                        }
                        this.setState({
                            avatarSource: source,
                            avatarUrl: url,
                            imagePath: path,
                        });
                    }
                });
                break;
            case 1:
                this.setState({
                    submitting: true,
                });
                UserAPIService.updateUserInformation(this.state.token, Global.Const.registeredId, this.state.inputUserName, this.state.imagePath).then((ret)=> {
                    dispatch({type: types.kUserInformationReceived, result: ret});
                    dispatch(userInfo(this.state.token, Global.Const.registeredId));
                    this.setState({
                        submitting: false,
                    });
                    this.props.navigator.resetTo({
                        id: 'Main',
                        component: Main,
                        passProps: {},
                    });
                }).catch((err)=> {
                    dispatch({type: types.kUserInformationReceived, result: null});
                    dispatch(userInfo(this.state.token, Global.Const.registeredId));
                    this.setState({
                        submitting: false,
                    });
                    this.props.navigator.resetTo({
                        id: 'Main',
                        component: Main,
                        passProps: {},
                    });
                });

                break;
        }
    }

    BackAction() {
        this.props.navigator.pop();
    }

    showText() {
        if (this.state.avatarUrl == '../../Image/icon_not_logged.png') {
            return (
                <Text style={{color:'white'}}>上传头像</Text>
            )
        }
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={()=>this.closeKeybord()}>
                <View style={styles.container}>
                    <View style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                        <View style={{marginTop:24,alignItems:'center'}}>

                            <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                                <TouchableOpacity activeOpacity={0.5}
                                                  onPress={()=>this.BackAction()}>
                                    <Image style={{resizeMode:'contain',width:21,height:21}}
                                           source={require('../../Image/icon_back.png')}></Image>
                                </TouchableOpacity>
                            </View>
                            <Text style={{fontSize:19,color:Global.FontColor.DimGray}}>完善资料</Text>
                        </View>
                    </View>
                    <View
                        style={{flex:1,alignItems:'center',backgroundColor:'white', borderTopWidth:3,borderColor:Global.Const.transparent}}>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.ClickAction(0)}>
                            <Image
                                style={{width:100,height:100,borderRadius:50,marginTop:50,justifyContent:'center',alignItems:'center'}}
                                source={this.state.avatarSource}>
                                {this.showText()}
                            </Image>
                        </TouchableOpacity>
                        <View
                            style={{alignItems:'center',marginTop:30,width:Global.Const.size.width,height:45,backgroundColor:'white',flexDirection:'row'}}>

                            <Image style={{resizeMode:'contain',width:18,height:18,marginLeft:40}}
                                   source={require('../../Image/account_icon.png')}></Image>

                            <TextInput
                                style={{marginLeft:5,flex:1}}
                                value={this.state.inputUserName}
                                onChangeText={inputUserName => this.setState({ inputUserName })}
                                placeholder={'请设置您的用户名'}
                                maxLength={18}
                                keyboardType={'default'}
                                underlineColorAndroid={'transparent'}></TextInput>
                        </View>
                        <View
                            style={{width:Global.Const.size.width-80,height:1,backgroundColor:Global.Const.transparent,marginLeft:40,marginRight:40}}></View>
                        <View style={{width:Global.Const.size.width-80,marginLeft:40,marginRight:40}}>
                            <Text style={{marginTop:3,fontSize:13}}>只支持中英文，数字</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.ClickAction(1)}>
                            <View
                                style={{marginTop:35,backgroundColor:'#24CD78',borderRadius:20, marginLeft:30,marginRight:30,marginBottom:10,width:Global.Const.size.width-60,height:40, alignItems:'center',justifyContent:'center'}}>
                                <Text style={{color:'white',fontSize:18}}>完 成</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    {this.state.submitting ? <View
                        style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                        <View
                            style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                            <ActivityIndicator
                                animating={this.state.animating}
                                style={{ alignItems: 'center',justifyContent: 'center'}}
                                size="large"/>
                            <Text style={{color:'white'}}>正在提交</Text>
                        </View>
                    </View> : null}
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});